<template>
	<view>
		<top-tabber backColor="#5B2177" tabTitle="更多视频" @backClick="backClick">
			<view class="iconfont" style="font-size: 48rpx;" slot="tab-right">&#xe689;</view>
		</top-tabber>
		<!-- 视频列表 -->
		<view class="two-guess-like-box" v-if="homeList.length">
			<view class="video-sort">
				<view class="small-video" >
					<view v-for="(item,i) in homeList" :key="item.vid" class="video-alone" @click="videoDetail(item.furl,item.vid)">
						<view class="main-video">
							<image :src="item.fcoverUrl" mode="aspectFill"></image>
							<view class="vip-logo">免费</view>
						</view>
						<view class="newest"><text class="newest-ident">[最新] </text>{{item.vcoverTitle}}</view>
						<view class="many-see">
							<view>{{item.vplayCount}} 人看过</view>
							<!-- <view>355</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 暂无数据 -->
		<no-data v-else></no-data>
	</view>
</template>

<script>
	import topTabber from "@/components/top-tabbar.vue"
	import { $POST, $GET } from '@/network/api.js'
	import noData from '@/components/nodata.vue'
	export default {
		components:{ topTabber, noData },
		data() {
			return {
				videoFormL: { // 视频列表参数
					channelId: '',
					isVip: 0,
					pageNum: 1,
					pageSize: 10
				},
				homeList: [], // 视频列表数据
			}
		},
		onLoad(options) {
			if (options) {
				this.videoFormL.channelId = options.channelId
				this.getVideo()
			}
		},
		methods:{
			// 跳视频详情
			 videoDetail(url,id) {
				 console.log("视频地址与id",url,id)
				uni.navigateTo({
					url: '/pages/home/video_details?videoUrl='+url+'&vid='+id
				})
			 },
			// 获取视频列表
			async getVideo() {
				const res = await $POST('/boke-item/file/getVideoFile',this.videoFormL)
				this.homeList = res.data
			},
			// 返回上一页
			backClick() {
				uni.switchTab({
					url: '/pages/home/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	//  列表二	猜你喜欢
	.two-guess-like-box{
		background-color: #FFFFFF;
		padding:24rpx;
		margin-bottom: 10rpx;
			
		// 视频
		.video-sort{
				.small-video{
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					.video-alone:nth-child(2n) {
						margin-right: 0 !important;
					}
					.video-alone{
						width: 340rpx;
						// height: 280rpx;
						margin-right: 7px;
						.main-video{
							width: 339rpx;
							height: 192rpx;
							border-radius: 10rpx;
							position: relative;
							z-index: 9 !important;
							image{
								width: 100%;
								height: 100%;
								border-radius: 10rpx;
							}
							.vip-logo{
								position: absolute;
								left: 0;
								top: 0;
								width: 99rpx;
								height: 30rpx;
								background: #000000;
								// background: rgba(0,0,0,.36);
								opacity: 0.5;
								border-radius: 10rpx 0rpx 10rpx 0;
								text-align: center;
								line-height: 30rpx;
								font-size: 22rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #EDA424;
							}
						}
						.newest{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							margin-top:16rpx;
							// text-align: center;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
							.newest-ident{
								color: #EE4242;
							}
						}
						.many-see{
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 20rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #666666;
							padding-bottom: 29rpx;
						}
					}
				}
		}
	}
</style>
